﻿<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="themes/ui-darkness/jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="css/mycss.css" />
    <script type="text/javascript" src="js/ui.js"></script>

</head>
    <body>
        <div id = "chat-container">
            <div id="tabs">
                <ul>
                </ul>
            </div> 
        </div>
    
        <div id="contact-list-container-border">
            <div id="contact-list-container">
            
                <div id="contact-list-container-user-information">
                    <img id="contact-list-container-user-information-image"/>   
                    <button id="edit-user-img-button" class="contact-list-container-user-img-edit" value="Edit"></button> 
                    <button id="edit-user-info-button" class="contact-list-container-user-info-edit"></button> 
                    <button id="user-logout-button" class="contact-list-container-user-logout"></button> 
                    <div id="contact-list-container-user-information-name" style="background-color: black"></div> 
                    <div id="contact-list-container-user-toolbox">
                        <button id="add-friend-button" class="contact-list-container-user-toolbox-add-friend"></button>
                        <button id="delete-friend-button" class="contact-list-container-user-toolbox-delete-friend"></button>
                        <button id="add-group-button" class="contact-list-container-user-toolbox-add-group"></button>
                        <button id="delete-group-button" class="contact-list-container-user-toolbox-delete-group"></button>
                        <button id="btnVideo" class="contact-list-container-user-toolbox-video-group"></button>
                        <button id="btnVoice" class="contact-list-container-user-toolbox-voice-group"></button>
                    </div>  
                </div>

                <div id="contact-list-container-search-box">
                    <input id="contact-list-container-search-box-text"></input>    
                    <button id="contact-list-container-search-box-icon"></button>  
                </div>

                <div id="contact-list-container-friends-list">
                    <div id="accordion-resizable" class="ui-widget-content">
                        <div id="accordion">
                        
                        </div>     
                    </div>                      
                </div>  
                
            </div>
        </div>
    
        <div id="add-friend-dialog" title="Add Friend">
            <form>
                <fieldset class="ui-helper-reset">
                
                    <label>Type</label>
                    <select id="combo-type-add" style="width: 95%">
                        <option value="">Select one...</option>
                        <option value="Web Chat"> Web Chat</option>
                        <option value="Yahoo!">Yahoo!</option>
                    </select>
                
                    <label for="friend-id-add">Friend's ID</label>
                    <input type="text" name="friend-id-add" id="friend-id-add" value="" class="ui-widget-content ui-corner-all"/>
                
                    <label for="group-option">Group</label>
                    <input type="text" name="group-option" id="group-option" value="" class="ui-widget-content ui-corner-all"/>
                </fieldset>
            </form>
        </div>
    
        <div id="delete-friend-dialog" title="Delete Friend">
            <form>
                <fieldset class="ui-helper-reset">
                    <label for="friend-id-delete">Friend's ID</label>
                    <input type="text" name="friend-id-delete" id="friend-id-delete" value="" class="ui-widget-content ui-corner-all"/>
                </fieldset>
            </form>
        </div>
    
        <div id="add-group-dialog" title="Add Group">
            <form>
                <fieldset class="ui-helper-reset">
                    <label for="group-id-add">Group Name</label>
                    <input type="text" name="group-id-add" id="group-id-add" value="" class="ui-widget-content ui-corner-all"/>
                </fieldset>
            </form>
        </div>
    
        <div id="delete-group-dialog" title="Delete Group">
            <form>
                <fieldset class="ui-helper-reset">
                    <label for="group-id-delete">Group Name</label>
                    <input type="text" name="group-id-delete" id="group-id-delete" value="" class="ui-widget-content ui-corner-all"/>
                </fieldset>
            </form>
        </div>
    
        <div id="update-member-dialog" title="Update">
            <form>
                <fieldset class="ui-helper-reset">
                    <div>
                        <label for="update-name">Full Name</label>
                        <br/>
                        <input type="text" name="update-name" id="update-name" class="text ui-widget-content ui-corner-all"/>
                    </div>
                
                    <div>
                        <label for="update-password">New Password</label>
                        <br/>
                        <input type="password" name="update-password" id="update-password" value="" class="text ui-widget-content ui-corner-all"/>
                    </div>
                
                    <div>
                        <label for="update-password-confirm">New Password Confirm</label>
                        <br/>
                        <input type="password" name="update-password-confirm" id="update-password-confirm" value="" class="text ui-widget-content ui-corner-all"/>
                    </div>
    
                </fieldset>
            </form>
        </div>

        <div hidden="hidden">
            <form id="postAvatar" enctype="multipart/form-data">
                <input type="file" id="file" />
            </form>
        </div> 
    
        <div hidden="hidden">
            <form id="sendFile" enctype="multipart/form-data">
                <input type="file" id="filesend" />
            </form>
        </div> 
    
        <div hidden="hidden">
            <form id="receiveFile" enctype="multipart/form-data">
                <input type="file" id="filereceive" src="Helper.aspx"/>
            </form>
        </div> 
        
        <div hidden="hidden">
            <form id="Form-share-photo" enctype="multipart/form-data">
                <div id="panel-share-photo" style="background-color: #FFFF99; border-style: double">
                <img id="photoShare" src ="" alt="share-photo" style="width: 600px; height: 400px" />
                </div>
                <input type="file" id="file1" />
            </form>
        </div> 


        <div hidden="hidden">
            <iframe id="iframetest" name="aaaa.doc" src="Helper.aspx" style="display: none;"></iframe>
        </div>
        
        <div id="receive-file" title="Receive File" hidden="hidden">
            <form>
                <fieldset class="ui-helper-reset">
                    <label>Your friend send you a file. Do you want to save this file?</label>
                </fieldset>
            </form>
        </div>
    
        <div id="accept-share-photo" title="Accept share photo" hidden="hidden">
            <form>
                <fieldset class="ui-helper-reset">
                    <label>Your friend invite you to share photo(s). Do you want to accept?</label>
                </fieldset>
            </form>
        </div>
    </body>
</html>
